<!doctype html>
<html lang="en">
<head>
	<link rel="stylesheet" href="css/animate.min.css"/> <!-- 动画效果 -->
	<link rel="stylesheet" href="css/common.css"/><!-- 页面基本样式 -->
	<title>jQuery+CSS3 多功能弹出层插件(v2.0) - by haibao</title>
</head>
<body>
<div id="wrapper">
	<div class="box">
		<div class="demo">
			<div class="w50">
				<div class="example">
					<a class="fadeIn dialog">fadeIn</a>
                    <a class="eeee">fadeIn</a>

				</div>
			</div>
		</div><!-- demo end -->

		<!-- 注意：请将要放入弹框的内容放在比如id="HBox"的容器中，然后将box的值换成该ID即可，比如：$(element).hDialog({'box':'#HBox'}); -->
		<div id="HBox" style="display: none">
			<form action="" method="post">
				<ul class="list">
					<li>
						<strong>昵 称  <font color="#ff0000">*</font></strong>
						<div class="fl"><input type="text" name="nickname" value="" required class="ipt nickname" /></div>
					</li>
					<li>
						<strong>手 机 <font color="#ff0000">*</font></strong>
						<div class="fl"><input type="text" name="phone" value="" required class="ipt phone" /></div>
					</li>
					<li>
						<strong>邮 箱 <font color="#ff0000">*</font></strong>
						<div class="fl"><input type="text" name="email" value="" required class="ipt email" /></div>
					</li>
					<li>
						<strong>性 别 <font color="#ff0000">&nbsp;</font></strong>
						<div class="fl">
							<label class="mr10"><input type="radio" name="sex" value="1"/>男</label>
							<label class="mr10"><input type="radio" name="sex" value="2"/>女</label>
							<label><input type="radio" name="sex" value="3"/>保密</label>
						</div>
					</li>
					<li>
						<strong>爱 好 <font color="#ff0000">&nbsp;</font></strong>
						<div class="fl">
							<label class="mr10"><input type="checkbox" name="like" value="男" />男</label>
							<label class="mr10"><input type="checkbox" name="like" value="女"/>女</label>
							<label><input type="checkbox" name="like" value="都喜欢"/>都喜欢</label>
						</div>
					</li>
					<li><input type="submit" value="确认提交" class="submitBtn" /></li>
				</ul>
			</form>
		</div><!-- HBox end -->	
	</div><!-- box end -->
</div><!-- wrapper end -->

<script type="text/javascript" src="/template/default/js/jquery.js"></script>
<script src="js/jquery.hDialog.js"></script>

<script>
$(function(){
    layer.open({
        content: '移动版和PC版不能同时存在同一页面'
        ,btn: '我知道了'
    });

    $('.dialog').click(function () {
        $.tooltip('OK, 操作成功！', 2500, true);
        //页面加载完成后自动执行
        $('#HBox').hDialog({title:'页面加载完成后自动执行', autoShow: true, height: 350});
    });



	//返回顶部

});
</script>
</body>
</html> 